<template>
  <div class="mine">
    <div class="header">
        <div class="pic"></div>
        <div class="iphone">
            <span>7a9aa5a077a</span>
            <span>130****9097</span>
        </div>
        <div class="btn">
            <button>账户设置</button>
        </div>
    </div>
    <div class="banner1">
        <img :src=pic alt="">
    </div>
    <div class="banner2">
        <div><h3>红包</h3></div>
        <div><h3>余额</h3></div>
    </div>
    <div class="banner3">
        <h3>常用工具</h3>
        <div class="my">
            <div>我的地址</div>
            <div>我的客服</div>
            <div>店铺关注</div>
            <div>评价有礼</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            pic:"https:img2.baidu.com/it/u=999150412,884289425&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=320",
        }
    }
}
</script>

<style>
    .mine{
        background: #f5f5f5;
        overflow: hidden;
    }
    .header{
        margin-top: 50px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .header .pic{
        margin: 10px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgb(1,142,255);;
    }
    .header .iphone{
        display: flex;
        flex-direction: column;
    }
    .header .iphone span:nth-child(1){
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 18px;
    }
    .header .iphone span:nth-child(2){
        font-size: 14px;
    }
    .header button{
        border-radius: 20px;
        border: 1px solid #999;
        padding:5px 10px;
    }
    .banner1{
        margin: 10px;
        height: 100px;
    }
    .banner1 img{
        height: 100px;
        width: 100%;
        border-radius: 20px;
    }
    .banner2{
        margin: 10px;
        height: 100px;
        border-radius: 20px;
        background: white;
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .banner3{
        margin: 10px;
        height: 100px;
    }
    .banner3 h3{
        padding-left: 5px;
        line-height: 40px;
    }
    .banner3 .my{
        line-height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

</style>